<!--
 * @Author: 赛罗
 * @Date: 2023-10-25 18:22:59
 * @LastEditors: 狸猫
 * @LastEditTime: 2024-04-18 18:30:36
 * @FilePath: \haixiaoke-enterprise-reconstruction\src\views\house\unmount\components\detail.vue
 * @Description: 
-->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="1200px"
      append-to-body
      custom-class="import-dialog"
    >
      <div class="header">
        <div class="title">房间：{{ form.fullAddress }}</div>
        <el-row :gutter="10">
          <el-col :span="6">
            <div class="info borderRight">
              <div class="item">
                <i class="logo el-icon-s-home"></i>
                <div class="content-box">
                  <div class="label">当前状态</div>
                  <div class="desc">
                    <dict-tag
                      :options="dict.type.dict_house_state"
                      :value="form.houseState"
                    />
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info borderRight">
              <div class="item">
                <i class="logo el-icon-s-data"></i>
                <div class="content-box">
                  <div class="label">房屋类型</div>
                  <div class="desc">
                    <dict-tag
                      :options="dict.type.dict_house_nature"
                      :value="form.houseNature"
                    />
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info borderRight">
              <div class="item">
                <i class="logo el-icon-s-finance"></i>
                <div class="content-box">
                  <div class="label">出租价格</div>
                  <div class="desc">-元/月</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info">
              <div class="item">
                <i class="logo el-icon-user-solid"></i>
                <div class="content-box">
                  <div class="label">房屋管理员</div>
                  <div class="desc">
                    赵管理 13411223344 <i class="icon el-icon-edit"></i>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="h-buttom">已入住-天</div>
      </div>
      <div class="main">
        <div class="tabs-box">
          <div class="tabs-header flex align-center justify-between">
            <div class="tabs-list">
              <div
                class="label"
                :class="{ active: index == current }"
                v-for="(item, index) in tabsList"
                :key="index"
                @click="current = index"
              >
                {{ item.label }}
              </div>
            </div>
            <div class="handle-box">
              <div class="item">
                <i class="el-icon-document"></i>
                预约
              </div>
              <div class="item">
                <i class="el-icon-document"></i>
                签约
              </div>
              <div class="item">
                <i class="el-icon-document"></i>
                添加账单
              </div>
            </div>
          </div>
          <div class="tabs-body" v-if="current == 0">
            <div class="info-box">
              <div class="info-title">
                <label>房间信息</label>
              </div>
              <el-row :gutter="10">
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">房间号</div>
                    <div class="value">{{ form.roomNumber }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">所属楼盘</div>
                    <div class="value">{{ form.estateName }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">地址</div>
                    <div class="value">
                      {{ form.fullAddress }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">房屋类型</div>
                    <div class="value">
                      <dict-tag
                        :options="dict.type.dict_house_nature"
                        :value="form.houseNature"
                      />
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">状态</div>
                    <div class="value">
                      <dict-tag
                        :options="dict.type.dict_house_state"
                        :value="form.houseState"
                      />
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">房屋面积</div>
                    <div class="value">{{ form.houseArea }} m<sup>2</sup></div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">房型类型</div>
                    <div class="value">
                      <dict-tag
                        :options="dict.type.dict_house_type"
                        :value="form.houseType"
                      />
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">户型</div>
                    <div class="value">{{form.roomType}}室</div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">是否线上出租</div>
                    <div class="value">
                      <dict-tag
                        :options="dict.type.dict_online_rental_type"
                        :value="form.onlineRentalType"
                      />
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">产权类型</div>
                    <div class="value">-</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">产权所有人</div>
                    <div class="value">-</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">关联物业</div>
                    <div class="value">-</div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">是否为智能设备</div>
                    <div class="value">
                      {{ form.smartFurnitureType == 0 ? "否" : "是" }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">水表号</div>
                    <div class="value">{{ form.waterMeterNumber }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">电表号</div>
                    <div class="value">{{ form.electricMeterNumber }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">燃气号</div>
                    <div class="value">{{ form.gasMeterNumber }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">房屋管理员</div>
                    <div class="value">-</div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="info-box">
              <div class="info-title">
                <label>房间配置</label>
              </div>
              <el-row :gutter="10">
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">装修信息</div>
                    <div class="value">-</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">配置</div>
                    <div class="value">
                      <el-tag
                        effect="plain"
                        style="margin-right: 10px"
                        v-for="(item, index) in form.facilitiesItemList"
                        :key="index"
                      >
                        {{ item.facilitiesName }}x{{
                          item.facilitiesNumber
                        }}
                        ￥{{ item.facilitiesPrice }}
                      </el-tag>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">备注信息</div>
                    <div class="value">-</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">标签</div>
                    <div class="value">
                      <el-tag effect="plain" style="margin-right: 10px">
                        -
                      </el-tag>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <!-- 操作记录 -->
          <operating-record
            :roomId="roomId"
            v-if="current == 6"
          ></operating-record>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRoom } from "@/api/house/room";
import operatingRecord from "./operating-record.vue";
export default {
  name: "roomDetail",
  dicts: [
    "dict_house_type",
    "dict_house_nature",
    "dict_online_rental_type",
    "dict_house_state",
  ],
  components: { operatingRecord },
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "详情",
    },
    roomId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      current: 0,
      tabsList: [
        { label: "基本信息", value: 0 },
        { label: "租约记录", value: 1 },
        { label: "财务账单", value: 2 },
        { label: "维保服务", value: 3 },
        { label: "智能锁记录", value: 4 },
        { label: "水电记录", value: 5 },
        { label: "操作记录", value: 6 },
      ],
      form: {},
    };
  },
  computed: {
    visible: {
      get() {
        return this.open;
      },
      set(val) {
        this.$emit("update:open", val); // visible 改变的时候通知父组件
      },
    },
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      getRoom(this.roomId).then((response) => {
        this.form = response.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.import-dialog {
  height: auto;
  max-height: 80vh;
  overflow-y: auto;
  .header {
    .title {
      background: #ceeefc;
      padding: 10px 30px;
      margin-bottom: 30px;
      font-weight: 700;
      font-size: 20px;
    }
    .info {
      position: relative;
      margin-bottom: 20px;
      &.borderRight {
        border-right: 1px solid #d7d7d7;
      }

      .item {
        display: flex;
        align-items: center;
        .logo {
          background: #f2f2f2;
          height: 60px;
          width: 60px;
          border-radius: 50%;
          color: #1296db;
          text-align: center;
          font-size: 50px;
          text-align: center;
        }
        .content-box {
          margin-left: 6px;
          .label {
            color: #aaaaaa;
            font-size: 14px;
            margin-bottom: 5px;
          }
          .desc {
            font-size: 16px;
            font-weight: 700;
            .icon {
              color: #1296db;
              cursor: pointer;
              font-size: 20px;
            }
          }
        }
      }
    }
    .h-buttom {
      background: #ceeefc;
      color: #1296db;
      padding: 5px 30px;
      margin-bottom: 20px;
    }
  }
  .main {
    .tabs-box {
      .tabs-header {
        position: relative;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 2px;
          background-color: #e4e7ed;
        }
        .tabs-list {
          display: flex;
          .label {
            color: #555555;
            font-size: 18px;
            cursor: pointer;
            margin-right: 20px;
            padding: 5px;
            &.active {
              color: #1296db;
              border-bottom: 3px solid #1296db;
              cursor: default;
              font-weight: 700;
            }
          }
        }
        .handle-box {
          display: flex;
          .item {
            margin-right: 5px;
            color: #1296db;
            cursor: pointer;
            font-size: 14px;
          }
        }
      }
      .tabs-body {
        .info-box {
          .info-title {
            margin: 20px 0;
            font-size: 20px;
          }
          .info-item {
            margin-bottom: 20px;
            .label {
              color: #7f7f7f;
              margin-bottom: 10px;
            }
            .value {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
//弹出层里内容的高度
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}
</style>
